<template>
<div 
    class="my-tabs"
    :style="{
        gridTemplateColumns:`repeat(
            ${tabs.length},
            ${gridStyle=='equal'?'1fr':'max-content'}
        )`,
    }">
    <div
        :class="{
            'item':true,
            'active-item':activeKey==index,
        }"
        v-for="(item,index) in tabs"
        :key="index"
        @click="onChange(index)"
        ref="item">
        {{isObject(item)?item.lable:item}}
    </div>
    <div 
        class="active-item-bg"
        ref="ItemBg">
    </div>
</div>
</template>
<script>
//标签切换按钮组件
//提供类名供外部调整
import {TaskControl} from '@/common/SimpleAnimation';
const taskServe = new TaskControl();
export default {
    name: 'MyTabs',
    props:{
        tabs:{
            type:Array,
            default:()=>[],
        },
        activeIndex:{  //当前选择的index
            type:Number,
            default:0,
        },
        gridStyle:{  //布局样式，等宽或自动
            type:String,
            default:'equal',
        },
    },
    data(){
        this.timer = undefined;  //记录任务的标识
        return {
            activeKey:0,  //当前已选择的选项
        }
    },
    watch:{
        activeIndex:{  //由外部指定的index
            handler(value){
                this.onChange(value);
            },
            immediate:true,
        },
    },
    mounted(){
       this.timer = taskServe.add(this.computedLocation);
    },
    methods:{
        isObject(target){
            return typeof target === 'object' && target !== null;
        },
        onChange(index){
            if(index == this.activeKey) return;
            this.activeKey = index;
            this.$emit('onChange',{
                index,
                activeData:this.tabs[index],
            });
        },
        computedLocation(){  //计算位置
            const ItemEls = this.$refs.item;
            const ItemBg = this.$refs.ItemBg;
            if(!ItemEls || !ItemBg) return;
            let left = 0;
            ItemEls.some((item,index)=>{
                if(index > this.activeKey) return;
                left += item.clientWidth;
            });
            let width = ItemEls[this.activeKey].clientWidth;
            let transform = `translateX(${left-width}px)`;
            width = `${width}px`;
            if(ItemBg.style.transform != transform){
                ItemBg.style.transform = transform;
            }
            if(ItemBg.style.width != width){
                ItemBg.style.width = width;
            }
        },
    },
    destroyed(){  //销毁时清除任务
        taskServe.clear(this.timer);
    },
}
</script>
<style scoped lang="scss">
.my-tabs {
    --my-tabs-padding:3px;
    --my-tabs-border-radius:7px;
    width: fit-content;
    height: fit-content;
    padding: var(--my-tabs-padding);
    box-sizing: border-box;
    background-color: rgb(240, 242, 245);
    border-radius: var(--my-tabs-border-radius);
    list-style: none;
    display: grid;
    position: relative;
    z-index: 0;
    >.item{
        border-radius: var(--my-tabs-border-radius);
        padding: 5px 8px;
        cursor: pointer;
        font-size: 14px;
        color: #8590a6;
    }
    >.active-item{
        color: #0084ff;
        font-weight: bold;
    }
    >.active-item-bg{
        height: calc(100% - var(--my-tabs-padding) - var(--my-tabs-padding));
        width: 0;
        left: var(--my-tabs-padding);
        top: var(--my-tabs-padding);
        border-radius: var(--my-tabs-border-radius);
        transition: transform 0.3s,width 0.3s;
        transform: translateX(0);
        position: absolute;
        background-color: rgba(0,132,255,.08);
        pointer-events: none;
        z-index: -1;
    }
}
</style>
